
<script setup lang="ts">
import { ref } from 'vue';

const visible = ref(false)

// $nextTick 原理: 目前就是微任务
// 发展历程: 最初是宏任务, 但是发现效率太低了, 所以改为了微任务(MutationObserver)
// 又发现, 微任务执行时机太早了, 经常页面还未更新就执行了
// 所以中间很长一段时间 大概有段时间, 采用的是微宏并行, 先判断是否支持 MutationObserver 如果支持就用微任务, 否则就用宏任务
// 最后全部该用微任务 MutationObserver 重新设计
// setTimeout()  宏任务  执行时机很晚
</script>
<template>
  <div class="father">
    <XtxButton @click="visible = true">点我打开 dialog</XtxButton>
    <!-- .sync 修饰符已经被移除 -->
    <!-- 在 vue3 中应该使用 v-model:visible 来代替 -->
    <!-- <XtxDialog :visible.sync="visible" title="我是标题"> -->
    <!-- 在业务上, dialog 应该在 div 里, 但是由于 div 的一些样式导致 dialog 样式出问题
    希望可以渲染到 body 上, 代码依然写在这里 -->
    <!-- teleport 传送门组件, 将内部的元素传送至指定区域 -->
    <!-- to 属性可以写选择器, 也可以是真实 dom 元素 -->
    <Teleport to="body">
      <XtxDialog v-model:visible="visible" title="我是标题">
        <h1>我是 H1</h1>
        <h2>我是 H2</h2>
        <template #footer>
          <XtxButton type="gray" style="margin-right: 20px" @click="visible = false">否</XtxButton>
          <XtxButton type="primary" @click="visible = false">是</XtxButton>
        </template>
      </XtxDialog>
    </Teleport>
  </div>
      
</template>

<style scoped>
.father {
  transform: translateX(1px);
}
</style>